<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html5布局</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--
    1. 新增加的标签
    header  头部
    nav     导航栏
    section 段落
    aside   侧边栏
    article 主要文章部分
    hgroup  标题
    p
    dialog  评论
    footer  底部

    2. li标签是搜索引擎最难引用的标签， 尽量少用
-->
<header>
    <div class="container">
        <a href="/"><img src="images/logo.png" alt="logo"></a>
        <nav>
            <a href="index.html" class="Home active">Home</a>
            <a href="" class="Course">Course</a>
            <a href="" class="Actual">Actual</a>
            <a href="" class="Plan">Plan</a>
            <a href="" class="FAQ">FAQ</a>
            <a href="" class="Notes">Notes</a>
        </nav>
    </div>
</header>


<section class="banner">
    <ul>
        <li class="active"><img src="images/banner/banner1.jpg" alt=""></li>
        <li class="left"><img src="images/banner/banner3.jpg" alt=""></li>
        <li class="right"><img src="images/banner/banner2.jpg" alt=""></li>
    </ul>
</section>

<section class="main">
    <aside>
        <h1>Recent <samp>Course</samp></h1>
        <dl>
            <dt>这个是标题</dt>
            <dd><img src="images/Course/02_09.png" alt=""></dd>
            <dd>这个是描述内容</dd>
        </dl>
        <dl>
            <dt>这个是标题</dt>
            <dd><img src="images/Course/02_09.png" alt=""></dd>
            <dd>这个是描述内容</dd>
        </dl>
        <dl>
            <dt>这个是标题</dt>
            <dd><img src="images/Course/02_09.png" alt=""></dd>
            <dd class="">这个是描述内容</dd>
        </dl>

        <dl>
            <dt>这个是标题</dt>
            <dd><img src="images/Course/02_09.png" alt=""></dd>
            <dd>这个是描述内容</dd>
        </dl>

    </aside>

    <article>
        <h1>这个是正文标题<samp>这个是浅色部分副标题</samp></h1>
        <p>这个是正文</p>
        <img src="images/article.jpg" alt="">
        <p>这个是正文</p>
        <p>这个是正文</p>
    </article>
</section>

<footer>
    <div class="container">
        <p>版权所有</p>
        <span>
                <img src="images/icon/weichat.png" alt="">
                <img src="images/icon/sina.png" alt="">
                <img src="images/icon/qq.png" alt="">
            </span>
    </div>
</footer>
</body>
</html>